<template>
  <div class="editor-container" id="editor-container">
    <div class="editor-header">
      <div>
        <el-tooltip slot="reference" content="设备视图" placement="top" :open-delay="300">
          <span class=" font-size-14 cursor-pointer icon-hover " @click="showDeviceDialog = true">设备视图</span>
        </el-tooltip>
        <el-tooltip slot="reference" content="组合命令" placement="top" :open-delay="300">
          <span class=" font-size-14 cursor-pointer icon-hover mar-lft-10" @click="showRoomScenesDialog = true">组合命令</span>
        </el-tooltip>
        <el-tooltip slot="reference" content="全局变量" placement="top" :open-delay="300">
          <span class=" font-size-14 cursor-pointer icon-hover mar-lft-10" @click="showGlobalVarDialog = true">全局变量</span>
        </el-tooltip>
        <el-tooltip slot="reference" content="真值反馈" placement="top" :open-delay="300">
          <span class=" font-size-14 cursor-pointer icon-hover mar-lft-10" @click="showIftttDialog = true">真值反馈</span>
        </el-tooltip>
	      <el-tooltip slot="reference" content="主题色" placement="top" :open-delay="300">
          <span class=" font-size-14 cursor-pointer icon-hover mar-lft-10" @click="showThemeDialog = true">主题色</span>
	      </el-tooltip>
        <el-tooltip slot="reference" content="小组件" placement="top" :open-delay="300">
          <span class=" font-size-14 cursor-pointer icon-hover mar-lft-10" @click="updateShowWidgetPage(true)">小组件</span>
        </el-tooltip>
        <el-popover
          v-model="showScalePopper"
          width="400" trigger="click"
          placement="bottom-start"
          popper-class="custom-popover">
          <el-tooltip slot="reference" :visible-arrow="false" content="全局比例缩放" placement="top" :open-delay="300">
            <span class=" font-size-14 cursor-pointer icon-hover mar-lft-10">全局比例缩放</span>
          </el-tooltip>
	        <WidgetScaleControl
		        v-if="showScalePopper"
		        :is-global="true"
		        @scaled="showScalePopper = false"
            @global-window="globalWindow"></WidgetScaleControl>
        </el-popover>
        <el-tooltip slot="reference" content="在线帮助文档" placement="top" :open-delay="300">
          <span class=" font-size-14 cursor-pointer icon-hover mar-lft-10" @click="openDocx">在线帮助文档</span>
        </el-tooltip>
      </div>

      <div>
        <span class="mar-lft-10">{{room.roomName || '--'}}</span>
        <el-tooltip slot="reference" content="撤销" placement="top" :open-delay="300">
          <i class="el-icon-refresh-left font-size-22 mar-lft-10 cursor-pointer icon-hover"
             @click="undoRedoHandler('undo')"></i>
        </el-tooltip>
        <el-tooltip slot="reference" content="重做" placement="top" :open-delay="300">
          <i class="el-icon-refresh-right font-size-22 mar-lft-10 cursor-pointer icon-hover"
             @click="undoRedoHandler('redo')"></i>
        </el-tooltip>
      </div>

      <div class="flex-justify-start">
        <template v-if="!room.isShare">
	        <div>
		        <span class="font-size-14 mar-rgt-5">冻结模式</span>
		        <el-switch v-model="freezeMode" @change="freezeModeChange"></el-switch>
	        </div>
          <el-tooltip slot="reference" content="保存" placement="top" :open-delay="300">
            <i
	            class="iconfont icon-save font-size-24 mar-lft-10 cursor-pointer icon-hover"
	            @click="saveRoom"></i>
          </el-tooltip>
        </template>
        <el-tooltip slot="reference" content="刷新" placement="top" :open-delay="300">
          <i class="iconfont icon-exchangerate font-size-24 mar-lft-10 cursor-pointer icon-hover"
             @click="refresh"></i>
        </el-tooltip>
        <div class="display-inline-block">
          <el-tooltip slot="reference" content="导出" placement="top" :open-delay="300">
            <i class="iconfont icon-download font-size-24 mar-lft-10 cursor-pointer icon-hover" @click="exportPage"></i>
          </el-tooltip>
          <el-tooltip slot="reference" content="截图" placement="top" :open-delay="300">
            <i class="iconfont  icon-shuffling-banner font-size-24 mar-lft-10 cursor-pointer icon-hover"
               @click="transDomToImage"></i>
          </el-tooltip>
          <el-tooltip slot="reference" content="预览" placement="top" :open-delay="300">
            <i class="iconfont icon-start font-size-22 mar-lft-10 cursor-pointer icon-hover" @click="preview"></i>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="display-flex width-100">
      <div class="editor-aside">
        <AsideCollapse
	        title="页面"
	        @addPage="addPage"
	        @sort="sorting => pageTreeSorting = sorting">
          <AsideWidgetTree
            editor-type="room"
            :page-hdl="pageHdl"
            :is-sorting="pageTreeSorting"
            :homePageId="homePageId"
            @setHomepage="setHomepage"
            @selectPage="updateCurPageType('page')"></AsideWidgetTree>
        </AsideCollapse>
        <AsideCollapse
	        title="子页面"
	        @addPage="addSubPage"
	        @sort="sorting => subPageTreeSorting = sorting">
          <AsideWidgetTree
	          editor-type="room"
	          :page-hdl="subPageHdl"
	          :is-sorting="subPageTreeSorting"
	          @selectPage="updateCurPageType('subPage')"></AsideWidgetTree>
        </AsideCollapse>
        <div>
          <div class="room-widget-picker-tab">
            <div
              style="width: 50%"
              v-for="(item, index) in widgetTabs" :key="index"
              :class="{'widget-picker-active-tab': activePickerTab === index }"
              @click="changeTab(item.type, index)">
              <el-tooltip :content="item.text" placement="bottom-start" :open-delay="300">
                <span>
                  {{item.name}}
                </span>
              </el-tooltip>
            </div>
          </div>
          <div>
            <div v-show="widgetType === 'ui'">
              <el-collapse v-model="activeUI" accordion @change="activeUIChange">
                <el-collapse-item   v-for="(item,index) in activeUiTabs" :name="item.name" :key="index">
                  <template slot="title">
                    {{item.title}}
                    <el-tooltip :content="item.text" placement="bottom-start" :open-delay="300">
                      <i class="header-icon el-icon-info"></i>
                    </el-tooltip>
                  </template>
                  <div v-show="activeUI === 'atom'">
                    <AsideWidgetPicker widget-type="atom"></AsideWidgetPicker>
                  </div>
                  <div v-show="activeUI === 'function'">
                    <AsideWidgetPicker widget-type="function"></AsideWidgetPicker>
                  </div>
                  <div v-show="activeUI === 'composite'">
                    <AsideComponentPicker widget-type="composite"></AsideComponentPicker>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div v-show="widgetType === 'device'" >
              <el-collapse v-model="activeDevice" accordion @change="activeDeviceChange">
                <el-collapse-item   v-for="(item,index) in activeDeviceTabs" :name="item.name" :key="index">
                  <template slot="title">
                    {{item.title}}
                    <el-tooltip :content="item.text" placement="bottom-start" :open-delay="300">
                    <i class="header-icon el-icon-info"></i>
                    </el-tooltip>
                  </template>
                  <div v-show="activeDevice === 'device'">
                    <AsideComponentPicker widget-type="device"></AsideComponentPicker>
                  </div>
                  <div v-show="activeDevice === 'layout'">
                    <AsideCompositePicker widget-type="layout"></AsideCompositePicker>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>

          </div>
        </div>
      </div>
      <div v-loading="loading" class="flex-1 color-white">
        <EditorWorkspace
	        ref="workspace"
	        editor-type="room"
	        @save="saveRoom"
	        @jumpLogic="jumpLogic"></EditorWorkspace>
      </div>
    </div>
	  <!--设备视图-->
	  <GlobalDevices v-model="showDeviceDialog" editor-type="room" :room-id="room._id"></GlobalDevices>
	  <!-- 全局变量配置 -->
	  <GlobalVariables v-model="showGlobalVarDialog" :variables="room.globalVar" :padType="room.padType" @submit="globalVarSubmit"></GlobalVariables>
	  <!-- 组合命令配置 -->
	  <GlobalScenes v-model="showRoomScenesDialog" :scenes="room.roomScenes" @submit="roomSceneSubmit"></GlobalScenes>
	  <!-- 真值反馈配置 -->
	  <IftttLogic v-model="showIftttDialog" editor-type="room" :room-id="room._id" :activeLogic="activeLogic"></IftttLogic>
	  <WidgetPicker editor-type="room"></WidgetPicker>
    <TokenRefresh :isEditor="true"></TokenRefresh>
	  <!-- 主题色选择 -->
	  <el-dialog title="主题色配置" :visible.sync="showThemeDialog" width="680px">
		  <ThemePicker v-model="room.theme" @change="themeChange"></ThemePicker>
	  </el-dialog>
  </div>
</template>

<script>
	import {PageHandler} from "@/modules/IDE/pageHandler";
	import EmptyContent from "@/components/IDE/EmptyContent.vue";
	import ThemePicker from "@/components/IDE/ThemePicker.vue";
	import CustomColorPicker from '@/components/IDE/colorPicker/Color.vue';
	import AsideCollapse from '../editor/aside/AsideCollapse.vue';
	import AsideWidgetTree from '../editor/aside/AsideWidgetTree.vue';
	import AsideWidgetPicker from '../editor/aside/AsideWidgetPicker.vue';
	import AsideComponentPicker from '../editor/aside/AsideComponentPicker.vue';
  import AsideMoleculePicker from '../editor/aside/AsideMoleculePicker.vue';
  import AsideCompositePicker from '../editor/aside/AsideCompositePicker.vue';
	import WidgetPicker from "@/components/IDE/widgetPicker/WidgetPicker.vue";
	import EditorWorkspace from '../editor/EditorWorkspace.vue';
	import GlobalVariables from '../editor/global/GlobalVariables.vue';
	import GlobalScenes from '../editor/global/GlobalScenes.vue';
	import GlobalDevices from '../editor/global/GlobalDevices.vue';
	import IftttLogic from '../editor/global/IftttLogic.vue';
	import WidgetScaleControl from '@/components/IDE/WidgetScaleControl.vue';
	import {
		base64toFile,
		downloadFileApi,
		editorConfigPreview,
		formatHttpParams,
		getUserInfo,
		messageHandle
	} from '@/utils';
	import {mapActions, mapState} from 'vuex';
	import {assetBaseUrl} from '@/config/env';
	import {userRoleCfg} from "@/config/ide/common";
	import {themeOption, uploadFileType} from "@/config/common";
	import {Dom2ImageHandler} from "@/modules/domToImageHandler";
	import API from "@/api";
	import {WidgetFactory} from "@/modules/IDE/widgetFactory";
	import TokenRefresh from '@/components/TokenRefresh';
	import {msgCode} from "@/config/string";


	export default {
    name: 'RoomEditor',
    components: {
	    WidgetPicker,
      EmptyContent, ThemePicker, CustomColorPicker,
	    AsideComponentPicker, AsideCollapse, AsideWidgetTree, AsideWidgetPicker,
      EditorWorkspace, GlobalDevices, GlobalVariables, GlobalScenes,AsideCompositePicker,
      IftttLogic, WidgetScaleControl, TokenRefresh,AsideMoleculePicker
    },
    data() {
      return {
        loading: true,
        userRoleCfg: userRoleCfg,
        userInfo: getUserInfo(),
        room: {},
        pageHdl: new PageHandler('page'),
	      pageTreeSorting: false,
        subPageHdl: new PageHandler('subPage'),
	      subPageTreeSorting: false,
	      freezeMode: false, // 是否开始冻结模式
        imgLength: 0,
	      showThemeDialog: false,
        widgetTabs: [
          {name: 'UI', type: 'ui',text:'它是UI设计中最基础de,包含原子、复合、功能组件'},
          {name: '设备', type: 'device',text:'它由一个或多个原子组合而成，带设备协议，形成具有基础功能的小型组件'},
        ],
        activeDeviceTabs: [
          {title: '设备组件', name: 'device',text:'带设备协议，设备组件'},
          {title: '小组件', name: 'layout',text:'带设备协议，小组件必须依赖拖拽布局'}
        ],
        activeUiTabs: [
          {title: '原子组件', name: 'atom',text:'最基础、不可再拆分的最小单元'},
          {title: '功能组件', name: 'function',text:'由系统内置代码生成的预设模块，其样式固定不可更改，但支持通过参数动态配置核心功能或行为'},
          {title: '复合组件', name: 'composite',text:'由一个或多个原子组合而成，形成具有基础功能的小型组件'},
        ],
        widgetType: 'ui',
        activePickerTab: 0,
        showDeviceDialog: false,
        showGlobalVarDialog: false,
        showRoomScenesDialog: false,
	      showIftttDialog: false,
        homePageId: '',
        showScalePopper: false,
        activeLogic:'room',
        activeUI:'atom',
        activeDevice:'device',
      };
    },
    computed: {
      ...mapState({
	      curPageType: state => state.ide.curPageType,
        subPage: state => state.ide.subPage,
        selectWidgetIds: state => state.ide.selectWidgetIds,
        imageAssetsList: state => state.ide.imageAssetsList,
      }),
    },
    created() {
      this.room = {_id: this.$route.params.rid};
      this.getRoomDetail();
	    this.getRoomAvailableAssetList();
    },
    mounted() {
      this.$EventBus.$on('tokenExpired', (expire = false) => {
        expire && this.$router.push({path: '/login'});
      });
      this.$EventBus.$on('jumpToSubPage', (widget) => {
        // 跳转到子页面编辑页
	      if (!widget.relateSubPage) return;
				this.updateCurPageType('subPage');
	      this.subPageHdl.updateActivePage({id: widget.relateSubPageId});
	      this.$EventBus.$emit('selectWidget', this.subPageHdl.activePage);
      });
    },
    beforeDestroy() {
      this.$EventBus.$off('tokenExpired');
      this.$EventBus.$off('jumpToSubPage');
    },
    destroyed() {
    },
    methods: {
      ...mapActions([
	      'updateImageAssetsList',
	      'updateActiveTheme',
        'updateFreezeMode',
        'updateGlobalVarList',
        'updateGlobalScenesList',
        'updateGlobalDeviceList',
        'updateGlobalLogicList',
	      'updateCurPageType',
	      'updateCurPageHandler',
	      'updateCurSubPageHandler',
        'updateShowWidgetPage'
      ]),
      refresh() {
        WidgetFactory.clear();
        this.getRoomDetail();
        this.getRoomAvailableAssetList();
      },
      getRoomDetail() {
        this.loading = true;
        API.room.roomDetail({roomId: this.room._id}).then(resp => {
          this.room = resp.data;
          const {
						_id, window, widgets = [], subPages = [],
	          theme = 'theme1', globalVar = [], roomScenes = [], homePageId = ''
					} = this.room;
          this.updateGlobalVarList(globalVar);
          this.updateGlobalScenesList(roomScenes);
          const colorsTheme = themeOption.find(item => item[theme]);
          colorsTheme && this.updateActiveTheme(colorsTheme[theme]);
          // 先异步请求所有的子页面数据，然后再组装页面数据
          Promise.all(this.getSubPageData(subPages)).then((subPageArr = []) => {
            this.loading = false;
	          // console.log('##### start #####', moment().format('x'));
            // 先组装子页面数据
            const destSubPageWidgets = [];
            subPageArr.forEach(subPage => {
              const {widgets = []} = subPage;
              widgets.forEach(w => destSubPageWidgets.push(w));
            });
            this.subPageHdl.initPages(destSubPageWidgets, {roomId: _id}, false);
            this.pageHdl.initPages(widgets, {roomId: _id, window});
	          this.pageHdl.refreshPageWidgetSortNo();
	          this.subPageHdl.refreshPageWidgetSortNo();
						this.updateCurPageHandler(this.pageHdl);
						this.updateCurSubPageHandler(this.subPageHdl);
	          this.homePageId = homePageId ? homePageId : this.pageHdl.pages[0].id;
            // 初始化后默认选中第一个页面
            this.$EventBus.$emit('selectWidget', this.pageHdl.activePage);
	          // console.log('##### end #####', moment().format('x'));
          }).catch(err => {
            this.loading = false;
          });
        }).catch(err => {
          this.loading = false;
        });
      },
      getSubPageData(subPages = []) {
        const promiseArr = [];
        subPages.forEach(subPage => {
          promiseArr.push(new Promise((resolve, reject) => {
						const param = {roomId: this.room._id, subPageId: subPage.id};
            API.room.roomSubPageDetail(param).then(resp => {
              resolve({id: subPage.id, widgets: resp.data});
            }).catch(err => {
              reject(err);
            });
          }));
        });
        return promiseArr;
      },
	    getRoomAvailableAssetList() {
		    API.room.roomAvailableAssetList({roomId: this.room._id}).then(resp => {
          if(this.imageAssetsList.length ===resp.data.length ){
            return;
          }
			    this.updateImageAssetsList(resp.data || []);
		    });
	    },
	    globalVarSubmit(variables = []) {
				this.showGlobalVarDialog = false;
				this.room.globalVar = variables;
		    this.updateGlobalVarList(variables);
	    },
	    roomSceneSubmit(scenes = []) {
				this.showRoomScenesDialog = false;
				this.room.roomScenes = scenes;
		    this.updateGlobalScenesList(scenes);
	    },
      addPage() {
        const newPage = this.pageHdl.createRootPage();
        this.$EventBus.$emit('selectWidget', this.pageHdl.activePage);
	      this.updateCurPageType('page');
	      const widgets = WidgetFactory.getWidgetFlattenChildren(newPage);
	      WidgetFactory.undoRedoHdl.operationHdl([{operationType: 'add', widgets: widgets}]);
      },
      addSubPage() {
	      const newSubPage = this.subPageHdl.createRootPage();
        this.$EventBus.$emit('selectWidget', this.subPageHdl.activePage);
	      this.updateCurPageType('subPage');
	      const widgets = WidgetFactory.getWidgetFlattenChildren(newSubPage);
	      WidgetFactory.undoRedoHdl.operationHdl([{operationType: 'add', widgets: widgets}]);
      },
	    undoRedoHandler(operation) {
        const workspace = this.$refs['workspace'];
        workspace && workspace.undoRedoHandler(operation);
      },
      saveRoom() {
	      if (this.loading) return;
        this.loading = true;
        this.setHomepage(this.homePageId)//在保存的时候 设置当前的首页 把其他页面隐藏
        //在保存前重置根组件的位置
        WidgetFactory.resetWidgetDefaultUI();
        Promise.all(this.saveRoomSubPage()).then(res => {
	        const {
		        _id = '', projectId = '', roomName = '', window, device = '', version = '',
		        roomType = '', theme, globalVar = [], roomScenes = [], remarks = '', previewImages = []
	        } = this.room;
	        const params = {
		        _id: _id,
		        projectId: projectId,
		        roomName: roomName,
		        window: window,
		        device: device,
		        roomType: roomType,
		        widgets: PageHandler.getPageFlattenWidgets(this.pageHdl.pages, true),
		        version: version,
		        theme: theme,
		        globalVar: globalVar,
		        roomScenes: roomScenes,
		        remarks: remarks,
		        homePageId: this.homePageId,
		        previewImages: previewImages
	        };
	        API.room.roomEdit(formatHttpParams(params)).then(resp => {
		        this.loading = false;
		        WidgetFactory.refreshWidgetsEntityId(resp.data);
		        WidgetFactory.resetWidgetsHash(params.widgets);
		        this.$message({message: '房间配置保存成功!', type: 'success', duration: 1500});
		        // WidgetFactory.resetWidgetDefaultUI();
	        }).catch(err => {
		        this.loading = false;
	        });
        }).catch(err => {
          this.loading = false;
        });
      },
      saveRoomSubPage() {
        const promiseArr = [];
        this.subPageHdl.pages.forEach(page => {
	        const params = {
		        roomId: this.room._id,
		        widgets: PageHandler.getPageFlattenWidgets([page], false),
	        };
					if (!params.widgets.length) return;
          promiseArr.push(new Promise((resolve, reject) => {
	          API.room.roomSubPageEdit(formatHttpParams(params)).then(resp => {
		          WidgetFactory.refreshWidgetsEntityId(resp.data);
		          WidgetFactory.resetWidgetsHash(params.widgets);
		          WidgetFactory.resetWidgetDefaultUI();
		          resolve();
	          }).catch(err => {
		          reject(err);
	          });
          }));
        });
        return promiseArr;
      },
      exportPage() {
        this.$confirm('是否导出资源包附带设备元数据(旧版本分控请选择不导出)?', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(() => {
            downloadFileApi(`${assetBaseUrl}/roomConfig/download/config/assets`, {_id: this.room._id,exportMetadata:true});
          })
          .catch(action => {
            if( action === 'cancel'){
              downloadFileApi(`${assetBaseUrl}/roomConfig/download/config/assets`, {_id: this.room._id,exportMetadata:false});
            }
          });
      },
      preview() {
	      editorConfigPreview({type: 'room', roomId: this.room._id});
      },
      // 是否开启冻结模式，不可更改所有组件的 rect 信息
	    freezeModeChange(freeze) {
        this.updateFreezeMode(freeze);
      },
      // 截图功能，页面元素转图片
      transDomToImage() {
        // 先取消所有组件的选择，避免截图截到组件的 sticks
        this.selectWidgetIds.forEach(sid => {
          const widget = WidgetFactory.getWidgetById(sid);
          widget.active = false;
        });
        this.$nextTick(() => {
          // 选取当前选中的页面的根 widget 进行截图
          const handler = new Dom2ImageHandler();
          handler.transform(this.pageHdl.activePage.id).then(result => {
            const formData = new FormData();
            const fileData = base64toFile(result);
            formData.append("file", fileData, '房间预览图');
	          const params = {type: uploadFileType.preview, previewType: 'room'};
            API.file.fileUpload(formData, params).then((resp) => {
	            const {files = []} = resp.data;
							const params = {
								type: uploadFileType.preview,
								action: 'add',
								roomId: this.room._id,
								files: files
							};
	            API.room.roomFileUpdate(params).then(resp => {
		            messageHandle({code: msgCode.UPLOAD_SUCCESS, title: '房间预览图'});
	            });
            }).catch((err) => {
              console.log("err: ", err);
            });
          });
        }, 200);
      },
      themeChange(name) {
        let activeTheme;
        const theme = themeOption.find(item => item[name]);
        activeTheme = theme ? theme[name] : [];
        this.updateActiveTheme(activeTheme);
        this.showThemeDialog = false;
      },
      changeTab(type, idx) {
        this.activePickerTab = idx;
        this.widgetType = type;
      },
	    setHomepage(pageId) {
        this.homePageId = pageId;
	      this.pageHdl.setHomepage(pageId);
      },
      jumpLogic(val) {
        this.activeLogic = val.activeLogic;
        this.showIftttDialog = val.showIftttDialog;
      },
      globalWindow(val) {
        this.room.window.width=val.width
        this.room.window.height=val.height
      },
      openDocx(){
        window.open(`https://ezprotech.feishu.cn/docx/U9n4dWgOboeaEixuPypcWy1tnjM?from=from_copylink`)
      },
      activeDeviceChange(val) {
        this.activeDevice = val;
      },
      activeUIChange(val) {
        this.activeUI = val;
      },
    }
  };
</script>

<style scoped lang="less">
  .color-border {
    width: 28px;
    height: 28px;
    padding: 4px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;

    .color-border-box {
      width: 100%;
      height: 100%;
      background: #f00;
      display: flex;
      align-items: center;
      justify-content: center;

      .arrow {
        color: #fff;
        font-size: 16px;
      }
    }
  }

  .home {
    color: @colorPrimary;
    cursor: pointer;
    margin-right: 8px;
  }

  .editor-container {
    height: 100vh;
    overflow: hidden;

    .editor-header {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      background: #2C2C2C;
      color: @colorWhite;
      z-index: 999;
    }

    .icon-hover:hover {
      color: @colorPrimary;
    }

    .editor-aside {
      width: 300px;
      height: calc(100vh - 40px);
      overflow: auto;
      flex-grow: 0;
      flex-shrink: 0;
      background: @colorWhite;
      border-right: 1px solid #DADCE5;
      box-shadow: 2px 0 5px @colorBlackAlpha05;
      box-sizing: border-box;
      z-index: 999;

      .room-widget-picker-tab {
        display: flex;
        justify-content: space-around;
        gap: 20px;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        border-bottom: 1px #DADCE5 solid;
        border-top: 1px #DADCE5 solid;

        div {
          color: #12131A;
          font-size: 14px;
          font-weight: bold;
          text-align: center;
          cursor: pointer;
        }

        .widget-picker-active-tab {
          color: @colorPrimary;
        }
      }

      &::-webkit-scrollbar {
        display: none;
      }
     /deep/ .el-collapse-item__header {
        padding: 0 5px 0 10px;
      }
    }
  }

</style>
